<template>
  <div class="wrap">
    <a-form
      ref="formRef"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
      :model="formState"
      :rules="rules"
      class="form-wrap"
    >
      <a-form-item class="item-wrap" label="资料名称" name="resourceName">
        <a-input
          v-model:value="formState.resourceName"
          placeholder="请输入资料名称"
          class="item-content"
        />
      </a-form-item>
      <a-form-item class="item-wrap" label="资源类别" name="resourceType">
        <a-select v-model:value="formState.resourceType" placeholder="请选择" class="item-content">
          <a-select-option v-for="item in resourceTypeList" :key="item" :value="item">{{
            item
          }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item class="item-wrap" label="查看人员" name="checkStaff">
        <a-select v-model:value="formState.checkStaff" placeholder="请选择" class="item-content">
          <a-select-option v-for="item in checkStaffList" :key="item" :value="item">{{
            item
          }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item class="item-wrap" label="查看范围" name="checkScope">
        <a-select v-model:value="formState.checkScope" placeholder="请选择" class="item-content">
          <a-select-option v-for="item in checkScopeList" :key="item" :value="item">{{
            item
          }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item class="item-wrap" :wrapper-col="{ span: 24, offset: 4 }">
        <custom-upload
          v-model:resource-id="formState.resourceId"
          action="/statement/resources/upload"
        ></custom-upload>
      </a-form-item>
      <a-form-item class="item-wrap" :wrapper-col="{ span: 24, offset: 4 }">
        <a-button style="color: white; background-color: #f50" @click="submit">提交</a-button>
        <a-button style="margin-left: 10px; background-color: #ececec" @click="cancel"
          >取消</a-button
        >
      </a-form-item>
    </a-form>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref, reactive, toRefs, UnwrapRef, toRaw } from 'vue'
  import { Button, Form, Input, Select } from 'ant-design-vue'
  import { ValidateErrorEntity } from 'ant-design-vue/es/form/interface'
  import CustomUpload from '@/components/CustomUpload.vue'
  import emitter, { EventsEnum } from '@/utils/emitter'
  import { useRoute } from 'vue-router'
  import { convertCheckScopeChinese2Code } from '@/views/resource/add.data'
  import { addResource } from '@/api/resource'
  import { convertResourceTypeChinese2Code } from '@/views/resource/sharing/index.data'

  interface FormState {
    resourceName: string
    resourceType: string
    resourceId: string
    checkScope: string
    checkStaff: string
  }
  export default defineComponent({
    name: 'AddResource',
    components: {
      CustomUpload,
      [Button.name]: Button,
      [Form.name]: Form,
      [Form.Item.name]: Form.Item,
      [Input.name]: Input,
      [Select.name]: Select,
      ASelectOption: Select.Option
    },
    props: {
      title: {
        type: String,
        default: ''
      },
      remove: {
        type: Function
      },
      fields: {
        type: Object,
        default: () => ({})
      }
    },
    setup() {
      const formRef = ref()
      const route = useRoute()

      const formState: UnwrapRef<FormState> = reactive({
        resourceName: '',
        checkStaff: '',
        checkScope: '',
        resourceType: '',
        resourceId: ''
      })
      const initialFormState = Object.assign({}, toRaw(formState))

      const state = reactive({
        resourceTypeList: ['报表共享', '填报说明', '制度通知', '其他事项'],
        checkStaffList: ['张三', '李四', '王五'],
        checkScopeList: ['周知', '授权']
      })

      const rules = {
        resourceName: [{ required: true, message: '请输入资源名称', trigger: 'blur' }],
        checkStaff: [{ required: true, message: '请选择查看人员', trigger: 'change' }],
        checkScope: [{ required: true, message: '请选择查看范围', trigger: 'change' }],
        resourceType: [{ required: true, message: '请选择资源类别', trigger: 'change' }]
      }

      const submit = () => {
        formRef.value
          .validate()
          .then(() => {
            const params = {
              resourceName: formState.resourceName,
              resourceScope: convertCheckScopeChinese2Code(formState.checkScope),
              resourceType: convertResourceTypeChinese2Code(formState.resourceType),
              resourceId: formState.resourceId,
              users: ['1']
            }
            addResource(params).then(() => {
              Object.assign(formState, initialFormState) // 提交成功后清空数据
            })
          })
          .catch((error: ValidateErrorEntity<FormState>) => {
            console.log('error', error)
          })
      }

      const cancel = () => {
        emitter.emit(EventsEnum.CLOSE_TAB, route)
      }

      return {
        ...toRefs(state),
        formState,
        rules,
        formRef,
        submit,
        cancel,
        labelCol: { span: 4 },
        wrapperCol: { span: 24 }
      }
    }
  })
</script>

<style lang="scss" scoped>
  .wrap {
    display: flex;
    justify-content: center;
  }
  .form-wrap {
    display: flex;
    flex-direction: column;
    width: 50%;
  }
  .item-wrap {
    width: 100%;
    margin-left: -5%;
  }
  //::v-deep(.ant-form-item-label) {
  //  & > label {
  //    display: flex;
  //    width: 70px;
  //    justify-content: flex-end;
  //  }
  //}
</style>
